import * as React from 'react';
import { observer } from 'mobx-react';
import { Form, Tabs, message } from 'antd';
import { ContentEditorPane } from './ContentEditorPane';
import { StandardPageModel, ICategory } from '../../../../model/content/pages/standard/PageModel';

const TabPane = Tabs.TabPane;

@observer
export class ContentEditor extends React.Component<{ store?: StandardPageModel }, {}> {

    private onSave = (index: number) => {
        this.props.store.save(index).then(
            res => message.success(res.message, 2.5),
            err => message.error(err.message, 2.5)
        );
    }

    render() {
        var {store} = this.props;
        var tabPanes = store.data.categories.map((category, index) => {
            return <TabPane tab={"编辑分类：" + category.name} key={index}>
                <ContentEditorPane
                    {...category}
                    adsOptions={store.adsOptions}
                    bannerOptions={store.bannerOptions}
                    eventOptions={store.eventOptions}
                    topicOptions={store.topicOptions}
                    updateAds={id => store.updateAds(index, id)}
                    addBanner={position => store.addBanner(index, position)}
                    deleteBanner={position => store.deleteBanner(index, position)}
                    addTopic={position => store.addTopic(index, position)}
                    deleteTopic={position => store.deleteTopic(index, position)}
                    addEvent={position => store.addEvent(index, position)}
                    deleteEvent={position => store.deleteEvent(index, position)}
                    fetchAdsOptions={name => store.fetchAdsOptions(name)}
                    fetchBannerOptions={name => store.fetchBannerOptions(name)}
                    fetchEventOptions={name => store.fetchEventOptions(name)}
                    fetchTopicOptions={name => store.fetchTopicOptions(name)}
                    updateBanner={(position, id) => store.updateBanner(index, position, id)}
                    updateEvent={(position, id) => store.updateEvent(index, position, id)}
                    updateTopic={(position, id) => store.updateTopic(index, position, id)}
                    onSave={() => this.onSave(index)} />
            </TabPane>
        });

        return <Tabs size="small">
            {tabPanes}
        </Tabs>
    }
}